// pages/inkEventProList/inkEventProList.js
import profile from '../../profile.js'

const app = getApp()


Page({

  /**
   * 页面的初始数据
   */
  data: {
    lang: app.globalData.language,
    index: profile.inkSign,

    items: profile.inkProduct.InkProList,

    popShow: false,
    popCont: []
  },

  // 语言切换事件
  menuTap: function (e) {
    this.setData({
      lang: e.detail.lang
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '大华银行艺术探索'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'UOB Art Explorer'
      })
    }
  },

  popClose: function (e) {
    this.setData({
      popShow: false,
      popCont: []
    })
  },

  // 图片放大
  imgEnlargeTap: function (e) {
    let list = this.data.items, id = e.detail, content = this.data.popCont;
    for (let i=0;i<list.length;i++) {
      if (id == list[i].id) {
        content.push(list[i]);
      }
    }
    this.setData({
      popShow: true,
      popCont: content
    })
  },

  // 单个作品like点击事件
  likeTap: function(e) {
    let id = e.detail.id, list = this.data.items;
    for (let i=0;i<list.length;i++){
        if (id == list[i].id) {
          if (list[i].like == true) {
            list[i].like = false;
            list[i].likeNum --;
            this._doUpdateItem(list[i],i);
          }else{
            list[i].like = true;
            list[i].likeNum ++;
            this._doUpdateItem(list[i],i);
          }
        }
    }
    this.setData({
      items: list
    })
    profile.inkProduct.InkProList = list;
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this._doRefreshMasonry(this.data.items);
    this.masonryHeightFun(300);
  },

  _doUpdateItem(newItem,index) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.updateItem(newItem,index);
  },

  // 刷新瀑布流
  _doRefreshMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 增加瀑布流内容
  _doAppendMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry')
    // 获取接口数据后使用瀑布流组件append方法，当append完成后调用then，是否可触底价在的标志位可以在这里处理
    this.masonryListComponent.append(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 瀑布流容器高度获取与设置
  masonryHeightFun: function (time) {
    let height = this.data.masonryHeight;
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query.select('#masonry').boundingClientRect(rect=>{
        height = rect.height;
        console.log(rect.height);
        this.setData({
          masonryHeight: height
        })
      }).exec();
    }, time);
  },
})